<template>
	<view>
		
		<ul class="content">
			<li class="goods_item"  v-for="(item,index) in goodsList" :key="index" @click="tapGoodsItem(item)">
				<view class="goods_img_box">
					<view class="goods_shadow"></view>
					<!-- <image :src="item.image" class="goods_img" mode="aspectFit" @error="defaultImgs(item)></image> -->
					<image :src="item.image==null?defaultImg:item.image" class="goods_img" mode="scaleToFill" @error="defaultImgs(item)"></image>
				</view>

				<view class="goods_item_name">
					<span class="goods_item_name_code">{{item.code}}</span>
					<sapn class="goods_item_name_price">{{item.add_price ?"+"+item.add_price+"元":""}}</sapn>
				</view>

			</li>
			

		</ul>
		
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		props:['goodsList','category_id'],
		name:'circle',
		data() {
			return {
			goodsDetail:null,
			showFitting:false,
			defaultImg:'https://env-00jxgsu6ddi5.normal.cloudstatic.cn/other_images/inProduction.jpg',
			
			
			};
		},
		computed:{
			goodsItem(){
				
				
				return this.goodsList;
			},
			...mapState({
				
				
				total: (state) => state.goods.total || 0,
			
			}),
		},
		methods:{
			tapGoodsItem(item) {
				
				uni.navigateTo({
					url: `/pages/goods-detail/goods-detail?goods_id=${item._id}&category_id=${this.category_id}`
				})
			},
			
			
			defaultImgs(item){
				this.$set(item,'image',this.defaultImg);
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	
	
	.content {
		/* background-color: rgb(232, 9, 9); */
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 20rpx 0;
		display: flex;
		/* 主轴横向 */
		flex-direction: row;
		/* 主轴对齐： 靠左对齐*/
		justify-content: flex-start;
		/* 容器满则换行 */
		flex-wrap: wrap;

		.goods_item {
			/* background-color: rgb(5, 248, 21); */
			list-style: none;
			width: 250rpx;
			height: 200rpx;
			margin: 10rpx 0;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.goods_img_box {
				position: relative;

				width: 170rpx;
				height: 170rpx;
				overflow: hidden;
				border-radius: 50%;

				.goods_shadow {
					position: absolute;

					top: 0;
					left: 0;
					background: transparent;
					width: 100%;
					height: 100%;
					overflow: hidden;
					border-radius: 50%;
					box-shadow: inset 3rpx 3rpx 5rpx #818283, inset -3rpx -3rpx 5rpx #ffffff;
				}

				.goods_img {
					width: 170rpx;
					height: 170rpx;
					border-radius: 50%;

				}
			}

			.goods_item_name {
				width: 100%;
				height: 30rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				/*强制文本在一行内显示*/
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;

				.goods_item_name_code {
					font-size: 18rpx;
					color: #000;

				}

				.goods_item_name_price {
					font-size: 24rpx;
					color: red;

				}

			}

		}
	}
	.pagination{
		padding: 0 50rpx;
		
	}
</style>